<template>
  <div class="box_my">
    <div class="touXiang">
      <div class="imgs">
        <van-image round width="3rem" height="3rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <p>{{ name }}</p>
      </div>
      <div>
      </div>
    </div>
    <div class="coupon">
      <!-- 优惠券单元格 -->
      <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
      <!-- 优惠券列表 -->
      <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
          @change="onChange" @exchange="onExchange" />
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useCounterStore } from '@/stores/counter'

let name = ref(localStorage.getItem('username'));
let coument = useCounterStore()

const coupon = [{
  available: 1,
  condition: '无门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
}, {
  available: 2,
  condition: '无门槛\n最多优惠18元',
  reason: '',
  value: 300,
  name: '优惠券名称',
  startAt: 1489104001,
  endAt: 1514592001,
  valueDesc: '3',
  unitDesc: '元',
}
]

const coupons = ref([...coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index) => {
  showList.value = false;
  chosenCoupon.value = index;
  // 把查到的优惠券信息存入pinia中
  // store.commit('setCoupon', coupons.value[index]);
  // console.log(coupons.value[index]);
  coument.addCoupon(coupons.value[index]);
  // 跳转到订单页面
  // router.push('/order');
};
const onExchange = (code) => {
  coupons.value.push(coupon);
  // console.log(code);
};

</script>
<style scoped>
.touXiang {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .imgs {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>